(function () {
  let carosel_list = document.querySelector("#carosel_list");
  let left_btn = document.querySelector("#left_btn");
  let right_btn = document.querySelector("#right_btn");
  let idx = 0;

  //复制第一个孩子
  let firstChild = carosel_list.children[0].cloneNode(true);
  carosel_list.appendChild(firstChild);

  //函数节流锁
  let lock = true;

  //右边按钮
  right_btn.onclick = right_btn_handler;
  function right_btn_handler() {
    if (!lock) return;
    lock = false;
    carosel_list.style.transition = "transform 0.5s ease 0s";
    idx++;
    carosel_list.style.transform = `translateX(${-16.66 * idx}%)`;
    if (idx > 4) {
      setTimeout(() => {
        idx = 0;
        carosel_list.style.transition = "none";
        carosel_list.style.transform = `translateX(${-16.66 * idx}%)`;
      }, 500);
    }
    setCircle();

    //开锁
    setTimeout(() => {
      lock = true;
    }, 500);
  }

  //左边按钮
  left_btn.onclick = function () {
    if (!lock) return;
    lock = false;
    if (idx === 0) {
      carosel_list.style.transition = "none";
      idx = 5;
      carosel_list.style.transform = `translateX(${-16.66 * idx}%)`;
      idx--;
      setTimeout(() => {
        carosel_list.style.transition = "transform 0.5s ease 0s";
        carosel_list.style.transform = `translateX(${-16.66 * idx}%)`;
      }, 0);
      setCircle();
    } else {
      idx--;
      carosel_list.style.transform = `translateX(${-16.66 * idx}%)`;
      setCircle();
    }
    setTimeout(() => {
      lock = true;
    }, 500);
  };

  //设置小圆点
  let cirol = document.querySelector("#circle");
  let cirlis = cirol.querySelectorAll("li");

  function setCircle() {
    for (let i = 0; i < cirlis.length; i++) {
      if (i === idx % cirlis.length) {
        cirlis[i].className = "current";
      } else {
        cirlis[i].className = "";
      }
    }
  }

  //让原点可以点击

  cirol.addEventListener(
    "click",
    function (e) {
      if (e.target.tagName.toLowerCase() == "li") {
        let num = e.target.getAttribute("data-n");
        idx = num;
        carosel_list.style.transform = `translateX(${-16.66 * idx}%)`;
        setCircle();
      }
    },
    true
  );

  // 自动播放;
  // setInterval(() => {
  //   carosel_list.style.transition = "transform 0.5s ease 0s";
  //   idx++;
  //   carosel_list.style.transform = `translateX(${-16.66 * idx}%)`;
  //   setCircle();
  //   if (idx > 4) {
  //     idx = 0;
  //     setCircle();
  //     setTimeout(function () {
  //       carosel_list.style.transition = "none";
  //       carosel_list.style.transform = `translateX(${-16.66 * idx}%)`;
  //     }, 500);
  //   }
  // }, 500);
  let timer = setInterval(right_btn_handler, 1000);

  //鼠标悬停banner设置
  let banner = document.querySelector("#banner");

  banner.addEventListener(
    "mouseenter",
    function () {
      clearInterval(timer);
    },
    true
  );

  banner.addEventListener(
    "mouseleave",
    function () {
      clearInterval(timer);
      timer = setInterval(right_btn_handler, 1000);
    },
    true
  );
})();
